<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slate view</title>
    <style>
        textarea {
            outline: 0;
        }

        #editor-view-container {
            border:  1px solid #ccc;
            width: 600px;
            height: 300px;
        }
        #editor-view-container [data-slate-editor] {
            outline: 0;
            white-space: pre-wrap; /* 【重要】可以显示空格，在连续多空格的情况下 */
            word-wrap: break-word;
            padding: 0 10px;
            height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        #editor-view-container [data-slate-editor] img {
            margin: 0 3px;
        }
        #editor-view-container [data-slate-editor] code {
            font-family: monospace;
            background-color: #eee;
            padding: 3px;
            border-radius: 3px;
        }
        #editor-view-container [data-slate-editor] pre>code {
            display: block;
            background-color: #fff;
            border: 1px solid #ccc;
        }
        #editor-view-container [data-slate-editor] table {
            border-collapse: collapse;
        }
        #editor-view-container [data-slate-editor] table td {
            border: 1px solid #ccc;
            padding: 3px 5px;
            width: 50px;
        }

        .toolbar {
            margin-bottom: 10px;
        }
        .toolbar>* {
            margin-right: 5px;
        }
        .toolbar .btn-active {
            color: blue;
            border-color: blue;
        }
    </style>

</head>
<body>
    <div id="editor-toolbar" class="toolbar"></div>
    <div id="editor-view-container"></div>

    <div style="margin-top: 10px;">
        <p>curSelection: <span id="span-selection"></span></p>
        <textarea id="text-content" rows="40" cols="100"></textarea>
    </div>

    <script>
        window.content = [
            // {
            //     type: 'header1',
            //     textAlign: 'center',
            //     children: [
            //         {
            //             text: "一行标题",
            //         },
            //         {
            //             text: "bold",
            //             bold: true
            //         }
            //     ]
            // },

            {
                type: 'paragraph',
                children: [
                    { text: "hello world ~~~ " },
                    {
                        text: 'background color',
                        bgColor: 'yellow'
                    },
                    { text: " " },
                    {
                        type: 'link',
                        url: 'https://www.slatejs.org/examples/links',
                        children: [{ text: 'slate examples' }],
                    },
                    { text: '!' }
                ]
            },
            {
                type: 'paragraph',
                children: [
                    { text: 'hello ' },
                    {
                        type: 'formula',
                        // LaTeX 语法
                        value: 'f(x) = a+b',
                        children: [{ text: '' }]
                    },
                    { text: ' ' },
                    { text: 'world', code: true },
                    { text: ' ~' }
                ]
            },
            // {
            //     type: 'video',
            //     url: 'http://106.55.153.217:8881/server/upload-files/movie-1-zq8.mp4',
            //     // url: 'http://106.55.153.217:8881/server/upload-files/movie-2-ti2.mp4',
            //     children: [{ text: '' }] // void 节点，需要有一个空 text
            // },
            // {
            //     type: 'pre',
            //     children: [
            //         {
            //             type: 'code',
            //             language: 'javascript',
            //             children: [{ text: 'const a = 100;\nconsole.log(a);' }]
            //         }
            //     ]
            // },
            // {
            //     type: 'bulleted-list',
            //     children: [
            //         {
            //             type: 'list-item',
            //             children: [{ text: '张三 and 张三 and 张三' }]
            //         },
            //         {
            //             type: 'list-item',
            //             children: [{ text: '李四 and 李四 and 李四' }]
            //         }
            //     ]
            // },
            // {
            //     type: 'numbered-list',
            //     children: [
            //         {
            //             type: 'list-item',
            //             children: [{ text: '张三 and 张三 and 张三' }]
            //         },
            //         {
            //             type: 'list-item',
            //             children: [{ text: '李四 and 李四 and 李四' }]
            //         }
            //     ]
            // },
            // {
            //     type: 'paragraph',
            //     children: [
            //         { text: "this is " },
            //         {
            //             text: "bold",
            //             bold: true
            //         },
            //         { text: " text." }
            //     ]
            // },
            // {
            //     type: 'paragraph',
            //     children: [
            //         { text: "abc" },
            //         {
            //             type: 'image',
            //             url: 'http://www.wangeditor.com/imgs/logo.jpeg',
            //             children: [{ text: '' }],
            //         },
            //         { text: "123" }
            //     ]
            // },
            // {
            //     type: 'table',
            //     children: [
            //         {
            //             type: 'table-row',
            //             children: [
            //                 {
            //                     type: 'table-cell',
            //                     children: [{ text: 'aaa' }]
            //                 },
            //                 {
            //                     type: 'table-cell',
            //                     children: [{ text: 'bbb' }]
            //                 }
            //             ]
            //         },
            //         {
            //             type: 'table-row',
            //             children: [
            //                 {
            //                     type: 'table-cell',
            //                     children: [{ text: 'ccc' }]
            //                 },
            //                 {
            //                     type: 'table-cell',
            //                     children: [{ text: 'ddd' }]
            //                 }
            //             ]
            //         }
            //     ]
            // },
            {
                type: 'paragraph',
                children: [
                    { text: "测试" },
                    { type: 'mention', content: 'wangfupeng', children: [{ text: '' }] },
                    { text: "一行文字" },
                    { type: 'mention', content: 'zhangsan', children: [{ text: '' }] },
                    { text: "The end." },
                ]
            }
        ]
    </script>
</body>
</html>